<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="video">
          <iframe
            style="width:100%;height:100%;overflow: hidden;"
            ref="iframe"
            frameborder="0"
            name="showHere"
            src="/html/newEaxmple.html"
          ></iframe>
        </div>
      </el-col>
      <el-col :offset="6" :span="18">
        <el-divider content-position="left">
          <h1>证件</h1>
        </el-divider>
        <el-radio
          v-model="userID.paperCard"
          :label="item.val"
          v-for="(item,ind) in papers"
          :key="ind"
        >{{item.name}}</el-radio>
        <div v-if="findPaper(['港澳台通行证','身份证'])">
          <el-divider content-position="left">
            <h1>身份证</h1>
          </el-divider>
          <div class="imgClass">
            <div class="imgClass-item" v-if="findPaper(['身份证'])">
              <div class="title">验证身份证</div>
              <div class="body">
                读卡器状态：{{userID.cardType?"已连接":"没连接"}}
                <br />
                姓名：{{userID.name}}
                <br />
                证件号：{{userID.paper}}
                <br />
                有限期：{{userID.limitedDate}}
                <br />
                地址：{{userID.addres}}
              </div>
              <div class="footer">
                <el-button type="primary" plain size="small" @click="proof">校验</el-button>
              </div>
            </div>
            {{userID.IDimgZ}}
            <div v-if="findPaper(['身份证','港澳台通行证'])" style="float:left">
              <gImgClass
                :title="`身份证正面`"
                :iframeRef="$refs.iframe"
                v-model="userID.IDimgZ"
              ></gImgClass>
              
              <gImgClass
                :title="`身份证反面`"
                :iframeRef="$refs.iframe"
                v-model="userID.IDimgF"
              ></gImgClass>
            </div>
          </div>
        </div>
        <div v-if="findPaper(['港澳台通行证'])">
          <el-divider content-position="left">
            <h1>港澳台通行证</h1>
          </el-divider>
          <div class="imgClass">
            <gImgClass
              :title="`港澳台通行证正本`"
              :iframeRef="$refs.iframe"
              v-model="userID.GAimgZ"
            ></gImgClass>
            <gImgClass
              :title="`港澳台通行证副本`"
              :iframeRef="$refs.iframe"
              v-model="userID.GAimgF"
            ></gImgClass>
          </div>
        </div>
        <div v-if="findPaper(['护照'])">
          <el-divider content-position="left">
            <h1>护照</h1>
          </el-divider>
          <div class="imgClass">
            <gImgClass
              :title="`护照第一页`"
              :iframeRef="$refs.iframe"
              v-model="userID.HZOimgZ"
            ></gImgClass>
            <gImgClass
              :title="`护照第二页`"
              :iframeRef="$refs.iframe"
              v-model="userID.HZTimgZ"
            ></gImgClass>
            <gImgClass
              :title="`护照第三页`"
              :iframeRef="$refs.iframe"
              v-model="userID.HZFimgZ"
            ></gImgClass>
          </div>
        </div>
        <div v-if="findPaper(['企业营业执行照（三合一）'])">
          <el-divider content-position="left">
            <h1>企业营业执行照（三合一）</h1>
          </el-divider>
          <div class="imgClass">
            <gImgClass
              :title="`企业营业执行照（三合一）`"
              :iframeRef="$refs.iframe"
              v-model="userID.YYimgZ"
            ></gImgClass>
          </div>
        </div>
        <div>
          <el-divider content-position="left">
            <h1>行驶证</h1>
          </el-divider>
          <div class="imgClass">
            <gImgClass
              :title="`行驶证正本`"
              :iframeRef="$refs.iframe"
              v-model="userID.XSimgZ"
            ></gImgClass>
            <gImgClass
              :title="`行驶证副本`"
              :iframeRef="$refs.iframe"
              v-model="userID.XSimgF"
            ></gImgClass>
          </div>
        </div>

        <el-divider content-position="left">
          <h1>车辆登记证书</h1>
        </el-divider>
        <div class="imgClass">
          <gImgClass
            :title="`车辆登记证书`"
            :iframeRef="$refs.iframe"
            v-model="userID.CZimgZ"
          ></gImgClass>
          <gImgClass
            :title="`车辆登记证书副页`"
            :iframeRef="$refs.iframe"
            v-model="userID.CZimgF"
          ></gImgClass>
        </div>

        <el-divider content-position="left">
          <h1>附件</h1>
        </el-divider>
        <div class="imgClass" style="display: flex">
          <!-- @imgChange="imgChangeFJ" -->
          <gImgClass
            :title="`附件`"
            :ifag="true"
            :iframeRef="$refs.iframe"
            :imgArr.sync="userID.FJimg"
            :limit="10"
          ></gImgClass>
          <div style="flex:1;" class="flex-c" v-show="userID.FJimg.length>0">
            <el-carousel
              style="width:100%"
              :interval="4000"
              type="card"
              height="200px"
              @change="chan"
              :autoplay="false"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item,ind) in userID.FJimg"
                :key="ind"
                :class="indexImg==ind?'active':''"
              >
                <span class="span">{{ind+1}}</span>
                <el-image class="arrImg" style :src="item" fit="contain"></el-image>
              </el-carousel-item>
            </el-carousel>
            <el-button style="width:fit-content" type="danger" size="small" @click="delImg">删除</el-button>
          </div>
        </div>
        <el-divider content-position="left">
          <h1>手机号码</h1>
        </el-divider>
        <el-input v-model="userID.phone" placeholder="请输入手机号码"></el-input>
      </el-col>
    </el-row>
    <div class="flex-centent" style="margin-top: 20px">
      <el-button
        type="warning"
        size="small"
        @click="$router.push(`/media/indexEadit/${userID._id}`)"
      >返回上一步</el-button>
      <el-button type="primary" size="small" @click="putCat">保存</el-button>
    </div>
  </div>
</template>

<script>
import { papers } from "./data.js";
import gImgClass from "../../components/imgClass";
// import '../../utils/index'
export default {
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  components: {
    gImgClass
  },
  data() {
    return {
      indexImg: 0,
      userID: {
        cardType: false, //读卡器状态
        paperCard: "身份证",
        name: "",
        paper: "",
        limitedDate: "",
        addres: "",
        IDimgZ: "",
        IDimgF: "",
        XSimgZ: "",
        XSimgF: "",
        CZimgZ: "",
        CZimgF: "",
        phone: "",
        FJimg: []
      },
      userIDarr: ["XSimgZ", "XSimgF", "CZimgZ", "CZimgF"],
      papers
    };
  },
  created() {
    this.id && this.getCat();
    let _this = this;
    window.addTab = function(obj) {
      _this.userID = Object.assign(_this.userID, obj);
      // return TabUtil().addTab(obj);
    };
  },
  methods: {
    ifCard() {
      let _this = this;
      let flag = true;
      let papersArr = _this.papers.find(v => v.val == _this.userID.paperCard);
      let arr = [..._this.userIDarr, ...papersArr.arr];
      arr.forEach(e => {
        if (!_this.userID[e]) {
          flag = false;
          return false;
        }
      });
      if (!flag) {
        this.$message({
          message: "警告哦，还没需上传证件",
          type: "warning"
        });
      }
      return flag;
    },
    chan(e) {
      this.indexImg = e;
    },
    delImg() {
      console.log("del", this.indexImg, this.userID);
      this.userID.FJimg.splice(this.indexImg, 1);
      //  this.$forceUpdate();
    },
    findPaper(arr) {
      let _this = this;
      return arr.find(v => v == _this.userID.paperCard);
    },
    // 身份校正
    proof() {
      var iframe = this.$refs.iframe;
      var iwindow = iframe.contentWindow;
      iwindow.proof();
    },
    //获取数据
    async getCat() {
      const forms = await this.$http.get(`/cats/${this.id}`);
      try {
        // this.userID = Object.assign(this.userID,forms.data);
        this.userID = {
          ...this.userID,
          ...forms.data
        };
        console.log("userId", this.userID);
      } catch (e) {
        console.log("err", e);
      }
    },
    // 保存数据
    async putCat() {
      if (!this.ifCard()) {
        return;
      }
      try {
        let aa = await this.$http.put("/cats", this.userID);
        console.log("aa", aa);
        if (!this.preview) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      } catch (e) {
        this.$message.error("错了哦" + e);
      }
    },
  },
  watch: {
    userID(newValue) {
      console.log("身份证", newValue);
      // console.log("str", oldValue);
    }
  }
};
</script>

<style lang="scss">
.flex-c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.arrImg {
  width: 100%;
  height: 100%;
}
.el-carousel__item {
  .span {
    color: #ffffff;
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  &.active {
    background-color: #f56c6c;
  }
}

.el-carousel__item {
  background-color: #d3dce6;
}
.imgClass {
  margin: 30px 0;
  width: 100%;
  overflow: hidden;
}
.imgClass-item {
  width: 250px;
  height: 250px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  font-size: 14px;
  float: left;
  margin-right: 20px;
  .title,
  .footer {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background-color: #409eff;
  }
  .body {
    height: 170px;
  }
  .footer {
    background-color: #ebeef5;
  }
}
.video {
  position: fixed;
  width: 300px;
  height: 300px;
  background-color: #c0c4cc;
}
</style>